/*
  学习目标：Redux在React中的使用
  需求：使用Redux保存数据，并且组件卸载时不销毁count的值
  步骤：
     1. 创建store： src/store/index.js
     2. 从store中取出count， 作为初始值
     3. 点击事件在redux中修改count的值
     4. useEffect 中 监听数据变化，同步数据给React
     5. 卸载时关闭监听

*/
import store, { addAction, decAction } from './store/index';
import { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';

// console.log('store -----> ', store.getState().count);

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show ? <Son /> : null}
    </div>
  );
}

function Son() {
  // 通过 useSelector 直接读取 redux 全局状态
  // const count = useSelector((state) => state.count);
  // useSelector原理是： 直接读取 reudx 中的状态，并且在组件内 新建了 state,并且数据改变后，帮你调用 setState
  const { count } = useSelector((state) => state);
  // 通过 useDispatch() 拿到 store.dispatch
  // useDispatch原理是： 内部源码就是直接 返回了 store.dispatch
  const dispatch = useDispatch();
  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      <button onClick={() => dispatch(addAction(1))}>+1</button>
      <button onClick={() => dispatch(decAction(1))}>-1</button>
    </div>
  );
}
